<template>
	<el-dialog v-model="dialogVisible" title="批量新增裁判员(小程序用户)">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="api.GetEmployeeDtoPageApi"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #headPortrait="scope">
				<el-image
					v-if="scope.row.headPortrait"
					class="table-td-thumb"
					:src="scope.row.headPortrait"
					:z-index="10"
					:preview-src-list="[scope.row.headPortrait]"
					preview-teleported
				>
				</el-image>
				<span v-else>--</span>
			</template>
		</proTable>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="resetForm">取消</el-button>
				<el-button type="primary" @click="handleSubmit">保存</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="tsx" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import proTable from "@/components/ProTable/index.vue";
import api from "@/api/modules/employee";
import refereeApi from "@/api/modules/referee";
import { ColumnProps } from "@/components/ProTable/interface";
const dialogVisible = ref(false);
interface DialogProps {
	getTableList?: () => void;
}
const dialogProps = ref<DialogProps>();
const proTableRef = ref();
const acceptParams = (api: () => void) => {
	dialogVisible.value = true;
	dialogProps.value = {
		getTableList: api
	};
};

// 关闭抽屉刷新数据
const resetForm = () => {
	dialogVisible.value = false;
	proTableRef.value?.clearSelection();
};

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	isSelectSuccess: true
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
const selectable = (row: any) => {
	return row.registrationStatus !== "待审核";
};
// 表格配置项
const columns: Partial<ColumnProps>[] = [
	{ type: "selection", width: 60, selectable, fixed: "left" },
	{
		prop: "nickName",
		label: "微信昵称",
		render: scope => {
			return <>{scope.row.nickName ? scope.row.nickName : "--"}</>;
		}
	},
	{ prop: "headPortrait", label: "头像" },
	{ prop: "realName", label: "姓名" },
	{ prop: "phone", label: "手机号", search: { el: "input", props: { placeholder: "请输入手机号" } } },
	{ prop: "idNumber", label: "身份证" },
	{ prop: "registerTime", label: "注册时间" },
	{ prop: "sensor", label: "传感器" },
	{ prop: "teamName", label: "所属团队" },
	{
		prop: "name",
		label: "姓名",
		isShow: false,
		search: { el: "input", props: { placeholder: "请输入姓名" } }
	}
];

const handleSubmit = async (): Promise<void> => {
	if (proTableRef.value?.selectedListIds.length === 0) {
		ElMessage.warning({ message: "请选择用户" });
		return;
	}
	try {
		let { result } = await refereeApi.AddRefereeEmployeeApi({
			employeeIds: proTableRef.value?.selectedListIds
		});
		if (result.code !== 200) {
			ElMessage.error({ message: result.message });
			return;
		}
		dialogVisible.value = false;
		ElMessage.success({ message: `新增成功！` });
		proTableRef.value?.clearSelection();
		proTableRef.value?.reset();
		dialogProps.value?.getTableList!();
	} catch (error) {
		console.log(error);
	}
};
defineExpose({
	acceptParams
});
</script>
